<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页布局作业</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- 布局：先整体，再局部，由外往内进行布局 -->
    <div class="box clear">
        <div class="goods">
            <img style="margin-top: 0;" src="images/img1.png" alt="">
            <div>
                <p>竞猜价：￥ 399.00</p>
                <p>翡翠千手观音吊坠</p>
            </div>
        </div>
        <div class="goods">
            <img src="images/img2.png" alt="">
            <div>
                <p>竞猜价：￥ 1980.00</p>
                <p>翡翠龙凤吊坠</p>
            </div>
        </div>
        <div class="goods">
            <img src="images/img3.png" alt="">
            <div>
                <p>竞猜价：￥ 199.00</p>
                <p>翡翠花蕊吊坠</p>
            </div>
        </div>
        <div class="goods noMarginRight">
            <img src="images/img4.png" alt="">
            <div>
                <p>竞猜价：￥ 199.00</p>
                <p>翡翠如意吊坠</p>
            </div>
        </div>
        <div class="goods">
            <img src="images/img5.png" alt="">
            <div>
                <p>竞猜价：￥ 99.00</p>
                <p>翡翠婵吊坠</p>
            </div>
        </div>
        <div class="goods">
            <img src="images/img6.png" alt="">
            <div>
                <p>竞猜价：￥ 99.00</p>
                <p>翡翠观音(浅色)吊坠</p>
            </div>
        </div>
        <div class="goods">
            <img src="images/img7.png" alt="">
            <div>
                <p>竞猜价：￥ 199.00</p>
                <p>翡翠平安扣(深色)吊坠</p>
            </div>
        </div>
        <div class="goods noMarginRight">
            <img src="images/img8.png" alt="">
            <div>
                <p>竞猜价：￥ 199.00</p>
                <p>翡翠如意吊坠</p>
            </div>
        </div>
    </div>

    <!-- html：主要就是标签，实现网页上的元素内容 -->
    <!-- <h1>html</h1>
    <p>html</p>
    <div> <span style="color: #f00;">div：</span> 用于布局的，没有任何样式的标签</div>
    <img src="images/img1.png" >
    <input type="text"> -->
    <!-- css：实现网页的样式 -->
    <!-- 基本选择器：标签选择器，id选择器，类选择器 -->
    <!-- 派生选择器：后代选择器 -->
</body>
</html>

